<template>
  <div class="addactivity">
    <el-dialog
      title="添加活动"
      :visible.sync="isVisible"
      @close="closeDialog"
      center
      width="45%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="formdata"
        :rules="rules"
        ref="formdata"
        class="demo-ruleForm"
        label-width="120px"
      >
        <el-form-item label="活动名称" prop="activityName" class="activityName">
          <el-input
            type="text"
            placeholder="请输入活动名称"
            v-model="formdata.activityName"
            maxlength="25"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择游戏" prop="gameId">
          <el-select
            v-model="formdata.gameId"
            filterable
            placeholder="请选择游戏"
            @change="changeGame"
          >
            <el-option
              v-for="item in linkgameOption"
              :key="item.id"
              :label="item.gameName"
              :value="{
                value: item.id,
                label: item.gameName,
                time: item.gameIssueTime,
              }"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <el-radio-group v-model="formdata.type" @change="changeType">
            <el-radio :label="1">无门槛首充活动</el-radio>
            <el-radio :label="2">满减券促销活动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="活动时间"
          required
          v-if="gameIssueTime != 0 && formdata.type == 1"
        >
          <div style="display: inline-block">
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="formdata.startTime"
                type="date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                :picker-options="startTimeOptions"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div style="display: inline-block; margin: 0 10px">-</div>
          <div style="display: inline-block">
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="formdata.endTime"
                type="date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="endTimeOptions"
              ></el-date-picker>
            </el-form-item>
          </div>
          <el-button circle class="iconAlert dataAlert" @click="dataclain"
            >?</el-button
          >
        </el-form-item>
        <el-form-item label="活动时间" required v-else>
          <div style="display: inline-block">
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="formdata.startTime"
                type="date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                :picker-options="startOptions"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div style="display: inline-block; margin: 0 10px">-</div>
          <div style="display: inline-block">
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="formdata.endTime"
                type="date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="endOptions"
              ></el-date-picker>
            </el-form-item>
          </div>
          <el-button circle class="iconAlert dataAlert" @click="dataclain"
            >?</el-button
          >
        </el-form-item>
        <el-form-item label="选择优惠券" prop="favorTerm">
          <el-select
            v-model="formdata.favorTerm"
            placeholder="请选择优惠券"
            multiple
            :multiple-limit="limitCount"
            value-key="id"
            @change="selectCode"
          >
            <el-option
              v-for="item in couponOption"
              :key="item.couponId"
              :label="item.name"
              :value="item.couponId"
            ></el-option>
          </el-select>
          <el-button circle class="iconAlert" @click="favorTermClain"
            >?</el-button
          >
        </el-form-item>
        <el-form-item
          label="类型1发放数量"
          v-if="formdata.favorTerm.length >= 1"
          required
        >
          <el-input
            type="number"
            placeholder
            v-model="type1"
            maxlength="7"
            autocomplete="off"
            @input="type1change"
            @change="type1iptchange"
          ></el-input>
          <span class="costColor">
            预计成本
            <el-input
              v-model="sum1"
              type="text"
              readonly
              class="costSum"
            ></el-input>
            <span>{{ sum1 }}</span
            >元
          </span>
        </el-form-item>
        <el-form-item
          label="类型2发放数量"
          v-if="formdata.favorTerm.length >= 2"
          required
        >
          <el-input
            type="number"
            placeholder
            v-model="type2"
            maxlength="7"
            autocomplete="off"
            @input="type2change"
            @change="type2iptchange"
          ></el-input>
          <span class="costColor">
            预计成本
            <el-input
              v-model="sum2"
              type="text"
              readonly
              class="costSum"
            ></el-input>
            <span>{{ sum2 }}</span
            >元
          </span>
        </el-form-item>
        <el-form-item
          label="类型3发放数量"
          v-if="formdata.favorTerm.length >= 3"
          required
        >
          <el-input
            type="number"
            placeholder
            v-model="type3"
            maxlength="7"
            autocomplete="off"
            @input="type3change"
            @change="type3iptchange"
          ></el-input>
          <span class="costColor">
            预计成本
            <el-input
              v-model="sum3"
              type="text"
              readonly
              class="costSum"
            ></el-input>
            <span>{{ sum3 }}</span
            >元
          </span>
        </el-form-item>
        <el-form-item
          label="类型4发放数量"
          v-if="formdata.favorTerm.length >= 4"
          required
        >
          <el-input
            type="number"
            placeholder
            v-model="type4"
            maxlength="7"
            autocomplete="off"
            @input="type4change"
            @change="type4iptchange"
          ></el-input>
          <span class="costColor">
            预计成本
            <el-input
              v-model="sum4"
              type="text"
              readonly
              class="costSum"
            ></el-input>
            <span>{{ sum4 }}</span
            >元
          </span>
        </el-form-item>
        <el-form-item
          label="类型5发放数量"
          v-if="formdata.favorTerm.length >= 5"
          required
        >
          <el-input
            type="number"
            placeholder
            v-model="type5"
            maxlength="7"
            autocomplete="off"
            @input="type5change"
            @change="type5iptchange"
          ></el-input>
          <span class="costColor">
            预计成本
            <el-input
              v-model="sum5"
              type="text"
              readonly
              class="costSum"
            ></el-input>
            <span>{{ sum5 }}</span
            >元
          </span>
        </el-form-item>
        <el-form-item
          label="类型6发放数量"
          v-if="formdata.favorTerm.length >= 6"
          required
        >
          <el-input
            type="number"
            placeholder
            v-model="type6"
            maxlength="7"
            autocomplete="off"
            @input="type6change"
            @change="type6iptchange"
          ></el-input>
          <span class="costColor">
            预计成本
            <el-input
              v-model="sum6"
              type="text"
              readonly
              class="costSum"
            ></el-input>
            <span>{{ sum6 }}</span
            >元
          </span>
        </el-form-item>
        <el-form-item
          label="类型7发放数量"
          v-if="formdata.favorTerm.length >= 7"
          required
        >
          <el-input
            type="number"
            placeholder
            v-model="type7"
            maxlength="7"
            autocomplete="off"
            @input="type7change"
            @change="type7iptchange"
          ></el-input>
          <span class="costColor">
            预计成本
            <el-input
              v-model="sum7"
              type="text"
              readonly
              class="costSum"
            ></el-input>
            <span>{{ sum7 }}</span
            >元
          </span>
        </el-form-item>
        <el-form-item
          label="类型8发放数量"
          v-if="formdata.favorTerm.length == 8"
          required
        >
          <el-input
            type="number"
            placeholder
            v-model="type8"
            maxlength="7"
            autocomplete="off"
            @input="type8change"
            @change="type8iptchange"
          ></el-input>
          <span class="costColor">
            预计成本
            <el-input
              v-model="sum8"
              type="text"
              readonly
              class="costSum"
            ></el-input>
            <span>{{ sum8 }}</span
            >元
          </span>
        </el-form-item>
        <el-form-item label="有效期" prop="validType">
          <el-select
            v-model="formdata.validType"
            placeholder="请选择"
            @change="vaildChange"
          >
            <el-option
              v-for="item in expiryOption"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效时间" v-if="formdata.validType == 1" required>
          <div style="display: inline-block">
            <el-form-item prop="validStartTime">
              <el-date-picker
                v-model="formdata.validStartTime"
                type="date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                :picker-options="validStartOptions"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div style="display: inline-block; margin: 0 10px">-</div>
          <div style="display: inline-block">
            <el-form-item prop="validEndTime">
              <el-date-picker
                v-model="formdata.validEndTime"
                type="date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="validEndOptions"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="有效时间" v-if="formdata.validType == 2" required>
          <div>
            <el-form-item prop="validDays">
              <el-input
                type="text"
                placeholder="领取后N天可用"
                v-model="formdata.validDays"
              ></el-input>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-input
            type="text"
            placeholder="全部用户"
            autocomplete="off"
            readonly
            class="userType"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formdata')"
          >确 定</el-button
        >
        <el-button @click="isVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { submitAddactivity } from "@/api/activityManage";
export default {
  inject: ["reload"],
  data() {
    return {
      isVisible: this.isShow,
      formdata: {
        activityName: "",
        startTime: "",
        endTime: "",
        validStartTime: "",
        validEndTime: "",
        validType: "",
        validDays: "",
        gameId: "",
        couponChecked: [],
        favorTerm: [],
        type: 0,
      },
      priceArr: [],
      sum1: 0,
      sum2: 0,
      sum3: 0,
      sum4: 0,
      sum5: 0,
      sum6: 0,
      sum7: 0,
      sum8: 0,
      type1: "",
      type2: "",
      type3: "",
      type4: "",
      type5: "",
      type6: "",
      type7: "",
      type8: "",
      totalNum: [],
      couponOption: "",
      expiryOption: [
        {
          id: 1,
          label: "时间区间",
        },
        {
          id: 2,
          label: "固定天数",
        },
      ],
      linkgameOption: this.dialogRow.games,
      rules: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        favorTerm: [
          { required: true, message: "请选择优惠券", trigger: "blur" },
        ],
        validStartTime: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        validEndTime: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        validType: [
          { required: true, message: "请选择有效期", trigger: "blur" },
        ],
        validDays: [
          {
            required: true,
            message: "请输入有效时间",
            trigger: "change",
            validator: (rule, value, callback) => {
              const reg = /^[1-9]\d*$/;
              if (value == "") {
                callback(new Error("请输入有效时间"));
              } else if (!reg.test(value)) {
                value = "";
                this.formdata.validDays = "";
                callback(new Error("首位不能为0"));
              } else {
                callback();
              }
            },
          },
        ],
        gameId: [
          { required: true, message: "请选择关联游戏", trigger: "blur" },
        ],
        type1: [
          {
            required: true,
            message: "请输入有效数量",
            trigger: "change",
            validator: (rule, value, callback) => {
              const reg = /^[1-9]\d*$/;
              if (value == "") {
                callback(new Error("请输入有效数量"));
              } else if (!reg.test(value)) {
                value = "";
                this.formdata.validDays = "";
                callback(new Error("首位不能为0"));
              } else {
                callback();
              }
            },
          },
        ],
        type: [{ required: true, message: "未选择活动类型", trigger: "blur" }],
      },
      startTimeOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.validStartTime;
          let end = this.gameIssueTime;
          let secondNum = 60 * 60 * 24 * 6 * 1000;
          if (delay) {
            return (
              new Date(delay).getTime() < time.getTime() ||
              new Date(end).getTime() - 8.64e7 > time.getTime() ||
              new Date(end).getTime() + secondNum < time.getTime() ||
              time.getTime() < Date.now() - 8.64e7
            );
          } else {
            return (
              new Date(end).getTime() - 8.64e7 > time.getTime() ||
              new Date(end).getTime() + secondNum < time.getTime() ||
              time.getTime() < Date.now() - 8.64e7
            );
          }
        },
      },
      endTimeOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.startTime;
          let end = this.gameIssueTime;
          let secondNum = 60 * 60 * 24 * 6 * 1000;
          if (delay) {
            return (
              time.getTime() < new Date(delay).getTime() - 8.64e7 ||
              new Date(end).getTime() + secondNum < time.getTime()
            );
          } else {
            return true;
          }
        },
      },
      startOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.validStartTime;
          if (delay) {
            return (
              new Date(delay).getTime() < time.getTime() ||
              time.getTime() < Date.now() - 8.64e7
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
      endOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.startTime;
          if (delay) {
            return time.getTime() < new Date(delay).getTime() - 8.64e7;
          } else {
            return true;
          }
        },
      },
      validStartOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.startTime;
          if (delay) {
            return (
              time.getTime() < new Date(delay).getTime() - 8.64e7 ||
              time.getTime() >
                new Date(this.formdata.endTime).getTime() -
                  8.64e7 +
                  4 * 24 * 3600 * 1000
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
      validEndOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.validStartTime;
          let before = this.formdata.endTime;
          if (delay) {
            return (
              time.getTime() < new Date(delay).getTime() - 8.64e7 ||
              time.getTime() < new Date(before).getTime() - 8.64e7
            );
          } else {
            return true;
          }
        },
      },
      limitCount: 1,
      gameIssueTime: "",
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Object,
    addList: Object,
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 表单提交
    submitForm(formName) {
      var vm = this;
      this.$refs[formName].validate((valid, value) => {
        if (valid) {
          this.formdata.couponChecked = [];
          this.formdata.favorTerm.map((item, index) => {
            const obj = {};
            obj["couponId"] = item;
            obj["totalNum"] = this.totalNum[index];
            this.formdata.couponChecked.push(obj);
          });
          const para = Object.assign({}, this.formdata);
          para.gameId = this.formdata.gameId.value;
          if (
            new Date(this.formdata.startTime) > new Date(this.formdata.endTime)
          ) {
            this.$message.error("您设置的活动时间有误，请检查");
          } else {
            if (this.formdata.type == 1 && this.gameIssueTime == 0) {
              this.$message.error("此游戏暂未设置首发时间，无法创建活动。");
            } else {
              submitAddactivity(para)
                .then((res) => {
                  if (res.code == 200) {
                    this.$message({
                      message: "创建成功！",
                      type: "success",
                    });
                    setTimeout(() => {
                      this.reload();
                    }, 20);
                    this.isVisible = false;
                  }
                })
                .catch((error) => {});
            }
          }
        } else {
          this.$message.error("创建失败，表单未填写完整！");
          return false;
        }
      });
    },
    selectCode(oId) {
      this.formdata.favorTerm = oId;
      this.priceArr = [];
      this.formdata.favorTerm.map((item) => {
        this.couponOption.map((ele) => {
          if (item == ele.couponId) {
            this.priceArr.push(ele.amount);
          }
        });
      });
    },
    type1change(value) {
      if (value == "" || value == "undefined") {
        value = 0;
      }
      this.sum1 = parseInt(this.priceArr[0]) * parseInt(value);
    },
    type1iptchange(value) {
      this.totalNum[0] = parseInt(value);
    },
    type2change(value) {
      if (value == "" || value == "undefined") {
        value = 0;
      }
      this.sum2 = parseInt(this.priceArr[1]) * parseInt(value);
    },
    type2iptchange(value) {
      this.totalNum[1] = parseInt(value);
    },
    type3change(value) {
      if (value == "" || value == "undefined") {
        value = 0;
      }
      this.sum3 = parseInt(this.priceArr[2]) * parseInt(value);
    },
    type3iptchange(value) {
      this.totalNum[2] = parseInt(value);
    },
    type4change(value) {
      if (value == "" || value == "undefined") {
        value = 0;
      }
      this.sum4 = parseInt(this.priceArr[3]) * parseInt(value);
    },
    type4iptchange(value) {
      this.totalNum[3] = parseInt(value);
    },
    type5change(value) {
      if (value == "" || value == "undefined") {
        value = 0;
      }
      this.sum5 = parseInt(this.priceArr[4]) * parseInt(value);
    },
    type5iptchange(value) {
      this.totalNum[4] = parseInt(value);
    },
    type6change(value) {
      if (value == "" || value == "undefined") {
        value = 0;
      }
      this.sum6 = parseInt(this.priceArr[5]) * parseInt(value);
    },
    type6iptchange(value) {
      this.totalNum[5] = parseInt(value);
    },
    type7change(value) {
      if (value == "" || value == "undefined") {
        value = 0;
      }
      this.sum7 = parseInt(this.priceArr[6]) * parseInt(value);
    },
    type7iptchange(value) {
      this.totalNum[6] = parseInt(value);
    },
    type8change(value) {
      if (value == "" || value == "undefined") {
        value = 0;
      }
      this.sum8 = parseInt(this.priceArr[7]) * parseInt(value);
    },
    type8iptchange(value) {
      this.totalNum[7] = parseInt(value);
    },
    dataclain() {
      this.$alert(
        "活动时间代表开放给用户领取和曝光的时间，请谨慎选择活动时间过期或者优惠券数量为0时，自动下架该领劵活动。无门槛活动仅限首发7日，满减卷活动时间无限制。",
        "活动时间说明",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    favorTermClain() {
      this.$alert(
        "同一个活动如需发行多种面额满减卷券，可以直接多选发行。但无门槛和满减卷需要单独发行，且无门槛暂只支持一种面额发放。独立管理，随机灵活。可自行根据需求选择发卷方式！",
        "选择优惠券说明",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    vaildChange(id) {
      if (id == 1) {
        this.formdata.validDays = "";
      } else if (id == 2) {
        this.formdata.validStartTime = "";
        this.formdata.validEndTime = "";
      }
    },
    changeType(val) {
      this.couponOption = "";
      if (val == 1) {
        //无门槛
        //commonCoupon
        this.couponOption = this.dialogRow.couponList.commonCoupon;
        this.limitCount = 1;
      } else if (val == 2) {
        //满减
        //fullReductionCoupon
        this.couponOption = this.dialogRow.couponList.fullReductionCoupon;
        this.limitCount = 8;
      }
      this.selectCode([]);
      this.formdata.startTime = "";
      this.formdata.endTime = "";
    },
    changeGame(val) {
      this.formdata.type = 0;
      this.couponOption = "";
      this.selectCode([]);
      const { value, label, time } = val;
      this.gameIssueTime = time;
    },
  },
};
</script>
<style lang="scss">
.addactivity {
  input::-webkit-inner-spin-button {
    display: none;
  }
  .activityName .el-input {
    width: 400px;
  }
  .el-form-item__label {
    padding: 0 20px 0 0;
  }
  .el-upload {
    .el-button {
      padding: 10px 77px;
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
      font-size: 12px;
    }
  }
  .el-form-item__content {
    margin-bottom: 20px;
    .iconAlert {
      position: absolute;
      padding: 0;
      top: 5px;
      left: 230px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    .dataAlert {
      left: 420px;
    }
    .iconAlert,
    .el-input__inner {
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
    }
    .el-input__inner::placeholder,
    .el-date-editor .el-range-input {
      color: #a5a4bf;
    }
  }

  .el-input {
    width: 220px !important;
  }
  .el-select-dropdown {
    width: 220px !important;
  }
  .costColor {
    color: #a5a4bf;
    font-size: 13px;
    margin-left: 20px;
  }
  .userType .el-input__inner {
    text-align: center;
  }
  .el-dialog {
    margin-top: 3vh !important;
  }
  .costSum.el-input {
    display: none;
  }
  .el-dialog__wrapper .el-input.is-disabled .el-input__inner {
    color: #a5a4bf !important;
    border: 1px solid #a5a4bf !important;
  }
  .el-date-editor.el-input {
    width: 180px !important;
  }
}
</style>